<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl" class="container" style="padding-top:30px">
    <h1>Modal Sample</h1>
    <a ng-click="openModal()">Click Here</a>
    
    <modal open="modalOpen" options="{top:35, height:300}" on-close="modalClosed(response)">
      <div class="panel panel-primary" ng-controller="modalCtrl">
        <div class="panel-heading">Are you sure?</div>
        <div class="panel-body">
          <div class="btn btn-success" ng-click="close('yes')">Yes</div>
          <div class="btn btn-success" ng-click="close('no')">No</div>
        </div>
      </div>
    </modal>
  </body>

</html>
